<template>
  <div class="content">
    <leftBar @leftBarCurrentEmit="leftBarCurrentEmit($event)"></leftBar>
    <topBar :leftBarCurrent="leftBarCurrent"></topBar>
  </div>
</template>
<script setup>
import { onMounted, reactive, watchEffect, ref } from "vue";
import leftBar from "./components/leftBar.vue";
import topBar from "./components/topBar.vue";

const leftBarCurrent = ref(0);

const leftBarCurrentEmit = (e) => {
  // console.log(e);
  // console.log(e.value);
  leftBarCurrent.value = e.value;
};
</script>
<style scoped>
.content {
  display: flex;
}
.right {
  flex: 1;
}

.list-item {
  display: flex;
}
.list-item-img {
  width: 200px;
  height: 200px;
}
.list-item-container {
  flex: 1;
}
</style>
